<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>吕楠</title>
		<link rel="stylesheet" type="text/css" href="css/swiper-3.3.1.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
	</head>
	<body>
		<div class="swiper-pagination" id="nav">
	            <a href="#self" swiper-pagination-swith>自我介绍</a>
	            <a href="#work" swiper-pagination-swith>工作经验</a>
	            <a href="#pro" swiper-pagination-swith>项目介绍</a>
	            <a href="#tel" swiper-pagination-swith>联系方式</a>	            		
	     </div>
		<div class="swiper-container">
	        <div class="swiper-wrapper">
	            <div class="swiper-slide" id="self" style="background-color: black; margin-bottom: 0px;">
	            	<div class="cont ">
		            	<div id="pho" class="photo ani"></div>
		            	<div class="font ani" swiper-animate-effect="bounceInRight" swiper-animate-duration="0.8s" swiper-animate-delay="0s">
		            		<p>姓名：吕楠</p>
		            		<p>性别：女</p>
		            		<p>学历：本科</p>
		            		<p>专业：软件工程</p>
		            		<p>个人评价：</p>
		            		<p>我是典型的90后女孩，有着和同龄人差不多的爱好，喜欢休闲娱乐项目</p>
		            		<p>但我更喜欢静下心来画画，还有我喜欢跳广场舞</p>
		            		<p>我也是典型的天蝎座，刚接触的时候会很含蓄，实质内心是热情奔放的</p>
		            		<p>与天蝎座不同的是我乐观洒脱不斤斤计较不愿将事情放在心上</p>
		            		<p>但我有责任有上进心而且很倔强，想要做的就想要做好</p>
		           			<p>我喜欢用乐观向上的心态对待任何事情</p>
		            		<p>我不愿浪费时间，总想让自己的每一天快乐充实精彩</p>
		            	</div>
	            	</div>
	            </div>
	            <div class="swiper-slide" id="work" style="background-color: black; margin-bottom: 0px;">
	            	<div class="swiper-container" id="exp">
	       				<div class="swiper-wrapper">
	            			<div class="swiper-slide" id="self" style="background-color: black; margin-bottom: 0px;">
				            	<div class="cont">
				            		<div class="font2 ani" swiper-animate-effect="bounceInDown" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
					            		<p>时间：2015/07 -- 至今</p>
					            		<p>公司：上海百弓网络科技有限公司</p>
					            		<p>职位：web前端工程师</p>
					            		<p>工作职责：</p>
					            		<p>1、主要职责是参与制定项目开发进度计划,保证按时按质量完成代码任务; </p>
					            		<p>2、与UI设计师协作,根据设计图运用HTML5和CSS特性构建PC端以及移动端界面, 响应式布局,浏览器兼容,书写符合W3C标准的代码;</p>
					            		<p>3、同时,在此基础之上,对完成的页面进行维护和网站性能的相应优化; </p>
					            		<p>4、运用JavaScript基本语法, 写出符合规范并且层次清晰地JS代码,完成网页的基本交互功能;</p>
					            		<p>5、与后端开发团队相互配合,完成网站的前后台数据交互,确保数据有效对接;</p>
					           			<p>6、运用AJAX调用后台提供的数据接口, 把返回的数据业务逻辑处理;</p>
					            		<p>7、利用php基本语法, mySql语句完成对数据库的简单操作;</p>
					            		<p>8、使用JQuery、Bootstrap、MUI、AngularJs等前端框架高效完成开发任务;</p>
					            		<p>9、协助测试人员完成项目测试, 后期对项目进行响应维护;</p>
					            	</div>
					            	<div class="more ani" swiper-animate-effect="bounceInUp" swiper-animate-duration="0.8s" swiper-animate-delay="0.3s">
						            	<div class="skill">
						            		<div class="type">
						            			<a href="###">HTML</a>
						            		</div>
						            		<div class="type">
						            			<a href="###">CSS</a>
						            		</div>
						            		<div class="type">
						            			<a href="###">JavaScript</a>
						            		</div>
						            		<div class="type">
						            			<a href="###">Bootstrap</a>
						            		</div>
						            		<div class="type">
						            			<a href="###">JQuery</a>
						            		</div>
						            		<div class="type">
						            			<a href="###">AngularJs</a>
						            		</div>
						            	</div>
					            	</div>
				            	</div>
				            </div>
				            <div class="swiper-slide" style="background-color: black; margin-bottom: 0px;" >
				            	<div class="cont">
				            		
				            	</div>
				            </div>
	            			<div class="swiper-slide" style="background-color: black; margin-bottom: 0px;">
	            				<div class="cont">
				            	</div>
	            			</div>           			
	       				</div>
	            	</div>
	            </div>	
	            <div class="swiper-slide" id="pro" style="background-color: black; margin-bottom: 0px;">
	            	<div class="cont">
	            		
	            	</div>
	            </div>
	            <div class="swiper-slide" id="tel" style="background-color: black; margin-bottom: 0px;">
	            	<div class="cont">
	            		<p class="infor">C O N T A C T&nbsp;&nbsp;&nbsp;&nbsp;I N F O R M A T I O N</p>
	            		<div class="pho">
	            			<img src="img/QQ图片20161116201206.jpg"/>
	            			<img src="img/QQ图片20161116201219.jpg"/>
	            		</div>
	            		<p class="botFont"><span>微信号/QQ：947581690</span><span>手机号：13889120142</span></p>
	            	</div>
	            </div>
	        </div>

	    </div>
		
	</body>
	<script src="js/swiper.animate1.0.2.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/swiper.min-2.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		var photo=document.querySelector("#pho");
		var fonts=document.querySelectorAll(".font > p");
		var fonts2=document.querySelectorAll(".font2 >p");
		var types=document.querySelectorAll(".type");
		photo.style.opacity="1";
		photo.onmousemove=function(){
			photo.style.transform="scale("+1.2+")";
		}
		photo.onmouseout=function(){
			photo.style.transform="scale("+1+")";
		}
//		淡入淡出
//		var i=0;
//		var fontTime;
//		var fontTime2;
//		function text(name,time){	
//			if (i>=name.length) {
//				clearInterval(time);
//				i=0;
//				fontTime2=setInterval(function(){
//					text(fonts2,fontTime2);
//				},100);
//			}else{
//				name[i].style.opacity="1";
//			}
//			i++;
//		}
//		fontTime=setInterval(function(){
//			text(fonts,fontTime);
//		},100);
		
		for (var j=0; j<types.length; j++ ) {
			types[j].index=j;
			types[j].onmousemove=function(){
				types[this.index].style.color="gray";
				types[this.index].style.borderColor="gray";
			}
			types[j].onmouseout=function(){
				types[this.index].style.color="";
				types[this.index].style.borderColor="";
			}
		}
		
	</script>
	<script type="text/javascript">
	var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        direction: 'vertical',
        slidesPerView: 1,
        paginationClickable: true,
        mousewheelControl: true,
        paginationType : 'custom',
        paginationElement : 'a',
        onInit: function(swiper){ //Swiper2.x的初始化是onFirstInit
		    swiperAnimate(swiper); //初始化完成开始动画
		  }, 
		onSlideChangeEnd: function(swiper){ 
		    swiperAnimate(swiper); //每个slide切换结束时也运行当前slide动画
		} 
    });
    var exp = new Swiper('#exp', {
        pagination: '.expswiper-pagination',
        direction: 'horizontal',
		grabCursor : true,
//      effect : 'coverflow',
//		centeredSlides: true,
//		coverflow: {
//		            rotate: 30,
//		            stretch: 10,
//		            depth: 60,
//		            modifier: 2,
//		       }
    });
	</script>

</html>
